<template>
    <div>
        <el-button type="primary" icon="el-icon-plus" @click="showDialog">添加</el-button>
        <el-table border style="width: 100%;margin-top: 20px;" :data="list">
            <el-table-column prop="prop" label="序号" width="68" align="center" type="index">
            </el-table-column>
            <el-table-column prop="tmName" label="品牌名称" align="center">
            </el-table-column>
            <el-table-column prop="logoUrl" label="品牌LOGO" align="center">
                <template slot-scope="{row, $index}">
                    <img :src="row.logoUrl" style="width: 50px;" alt="图片加载不出来" />
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" align="center">
                <template slot-scope="{row, $index}">
                    <el-button type="warning" icon="el-icon-edit" size="mini"
                        @click="updateTradeMark(row)">修改</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini"
                        @click="deleteTradeMark(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination style="margin-top: 20px;text-align: center;" :current-page="page" :total="total"
                :page-size="limit" :pager-count="7" :page-sizes="[3, 5, 10]"
                layout="prev, pager, next, jumper, ->, sizes,total" @current-change="handlerCurrentChange"
                @size-change="handlerChangeSize">
            </el-pagination>
        </div>
        <el-dialog :title="tmForm.id ? '修改品牌' : '添加品牌'" :visible.sync="dialogFormVisible">
            <el-form style="width: 80%;" :model="tmForm" :rules="rules" ref="ruleForm">
                <el-form-item label="品牌名称" label-width="100px" prop="tmName">
                    <el-input autocomplete="off" v-model="tmForm.tmName"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
                    <el-upload action="/dev-api/admin/product/fileUpload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateTradeMark">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'TradeMark',
    data() {
        return {
            page: 1,
            limit: 3,
            total: 0,
            list: [],
            dialogFormVisible: false,
            dialogVisible: true,
            imageUrl: '',
            tmForm: {
                logoUrl: '',
                tmName: ''
            },
            rules: {
                tmName: [
                    { required: true, message: '请输入品牌名称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 10 个字符', trigger: 'change' }
                ],
                logoUrl: [
                    { required: true, message: '请选择品牌的图片' }
                ],
            }
        }
    },
    mounted() {
        this.getPageList()
    },
    methods: {
        // 获取品牌列表数据
        async getPageList() {
            const { page, limit } = this
            let res = await this.$API.tradeMark.reqtradeMarkList(page, limit)
            this.list = res.data.records
            this.total = res.data.total
        },
        handlerCurrentChange(pager) {
            this.page = pager
            this.getPageList()
        },
        handlerChangeSize(limit) {
            this.limit = limit
            this.getPageList()
        },
        showDialog() {
            this.dialogFormVisible = true
            this.tmForm = { logoUrl: '', tmName: '' }
        },
        // 修改品牌
        updateTradeMark(row) {
            this.tmForm = { ...row }
            this.dialogFormVisible = true
        },
        // 图片上传成功
        handleAvatarSuccess(res, file) {
            // res：图片上传之后服务器返回图片真正的存储地址  file：上传成功后服务器返回的数据
            this.tmForm.logoUrl = res.data;
        },
        // 图片上传之前
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        addOrUpdateTradeMark() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    this.dialogFormVisible = false
                    let res = await this.$API.tradeMark.reqAddOrUpdateTradeMark(this.tmForm)
                    if (res.code == 200) {
                        this.$message({ message: this.tmForm.id ? "修改品牌成功" : '添加品牌成功', type: 'success' })
                        this.getPageList()
                    }
                }
                else {
                    this.$message({ message: '表单验证错误', type: 'warning' })
                    return false
                }
            })
        },
        deleteTradeMark(row) {
            this.$confirm(`确定删除${row.tmName}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$API.tradeMark.reqDeleteTradeMark(row.id)
                if (res.code == 200) {
                    this.$message({ message: "删除品牌成功", type: 'success' })
                    this.getPageList()
                } else {
                    this.$message({ message: "删除品牌失败", type: 'error' })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }
    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>